<template>
  <t-table
    row-key="order_item_id"
    table-layout="auto"
    :data="data"
    :columns="columns"
    height="40vh"
    hover
  >
    <template #link="{ row }">
      <t-icon v-if="row.goods" name="link-1" style="color: var(--td-brand-color)" />
      <t-icon v-else name="link-unlink" style="color: var(--td-warning-color)" />
    </template>
    <template #sku="{ row }">
      <t-tag theme="primary" variant="light">{{ row.sku }}</t-tag>
    </template>
    <template #name="{ row }">
      <t-row :gutter="15" align="middle">
        <t-col flex="50px">
          <img :src="row.product_main_image" style="width: 50px; border-radius: 5px;" />
        </t-col>
        <t-col flex="1">
          {{ row.name }}
        </t-col>
      </t-row>
    </template>
    <template #variation="{ row }">
      {{ row.variation }}
    </template>
    <template #price="{ row }">
      <b>{{ app.money.format(row.paid_price) }}</b>
    </template>
  </t-table>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['data'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'link',
    cell: 'link',
    width: 40
  }, {
    title: plugin.t('order.item.name'),
    colKey: 'name',
    cell: 'name',
    width: 400
  }, {
    title: plugin.t('order.item.sku'),
    colKey: 'sku',
    cell: 'sku'
  }, {
    title: plugin.t('order.item.variation'),
    colKey: 'variation',
  }, {
    title: plugin.t('order.item.paid_price'),
    colKey: 'paid_price',
    cell: 'price',
    fixed: 'right',
    align: 'right'
  }]
</script>